<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Task Admin Panel</title>
  <link rel="stylesheet" href="tasks_admin.css">
</head>
<body>
  <div id="adminContainer">
    <div class="admin-header">
      <span class="admin-title">Task Admin Panel</span>
      <div class="admin-actions">
        <!-- 统一按钮样式 -->
        <button id="generateReportBtn" title="Generate Report" class="icon-button">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#1677ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
            <polyline points="14 2 14 8 20 8"></polyline>
            <line x1="16" y1="13" x2="8" y2="13"></line>
            <line x1="16" y1="17" x2="8" y2="17"></line>
            <polyline points="10 9 9 9 8 9"></polyline>
          </svg>
        </button>
        <button id="widthToggleBtn" title="Toggle Width" class="icon-button">
          <svg id="widthIcon" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#1677ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="3" y="7" width="18" height="10" rx="2"/>
            <path d="M8 7v10M16 7v10"/>
          </svg>
        </button>
      </div>
    </div>
    <div id="searchBar">
      <input type="text" id="searchInput" placeholder="Search tasks...">
      <select id="statusSelect">
        <option value="">All</option>
        <option value="Pending">Pending</option>
        <option value="In Progress">In Progress</option>
        <option value="Completed">Completed</option>
      </select>
      <input type="date" id="startDate" style="width:140px;" placeholder="Start Date">
      <span style="color:#888;">-</span>
      <input type="date" id="endDate" style="width:140px;" placeholder="End Date">
      <button id="searchBtn">Search</button>
      <button id="resetBtn">Reset</button>
    </div>
    <!-- 新增统计栏 -->
    <div id="statsBar" style="margin:10px 0;display:flex;gap:24px;"></div>
    <table id="taskList">
      <thead>
        <tr>
          <th>Title</th>
          <th>Status</th>
          <th>Note</th>
          <th>Duration</th>
          <th>Start Time</th>
          <th>End Time</th>
        </tr>
      </thead>
      <tbody id="taskTbody"></tbody>
      <tfoot>
        <tr id="totalRow">
          <td colspan="1" style="text-align:left;">Total Duration </td>
          <td colspan="5" style="text-align:left;"><span id="totalTime"></span></td>
        </tr>
      </tfoot>
    </table>
    <div class="pagination" id="pagination"></div>
    
    <!-- 添加周报模态框 -->
    <div id="reportModal" class="modal">
      <div class="modal-content">
        <div class="modal-header">
          <h2>Weekly Work Report</h2>
          <span class="close">&times;</span>
        </div>
        <div class="modal-body">
          <div id="reportContent" class="report-content"></div>
        </div>
        <div class="modal-footer">
          <button id="copyReportBtn">Copy Report</button>
          <button id="closeModalBtn">Close</button>
        </div>
      </div>
    </div>
  </div>
  <script src="tasks.js"></script>
</body>
</html> 